<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Dashboard</title>
    <link href="assets/css/bootstrap.css" rel="stylesheet" media="screen">
    <link href="assets/css/jquery.jqplot.min.css" rel="stylesheet" media="screen">
    <link href="assets/css/chosen.css" rel="stylesheet" media="screen">
</head>
<body>
<div class="navbar navbar-static-top">
    <div class="navbar-inner">
        <div class="container">
            <a class="brand" href="#">Project name</a>
            <div class="nav-collapse">
                <ul class="nav">
                    <li class="active"><a href="dashboard.html"><i class="icon-home icon-black"></i> Dashboard</a></li>
                    <li><a href="history.html"><i class="icon-time icon-black"></i> History</a></li>
                    <li><a href="tasks.html"><i class="icon-check icon-black"></i> Tasks</a></li>
                </ul>
                <div href="#" class="btn btn-success disabled" style="margin-left: 100px;">Balance: +354,33 &euro;</div>
                <div class="pull-right">
                    <a href="#add" role="button" class="btn btn-primary" data-toggle="modal">Add expense</a>
                    <div class="btn-group">
                        <a href="#" class="btn dropdown-toggle" data-toggle="dropdown">
                            Niko
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="settings.html"><i class="icon-cog icon-black"></i> Settings</a></li>
                            <li class="divider"></li>
                            <li><a href="login.html"><i class="icon-off icon-black"></i> Logout</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="add" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="addLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3 id="addLabel">Add expense</h3>
    </div>
    <div class="modal-body">
    	<div id="alertikus2"></div>
        <form class="form-horizontal">
            <div class="control-group">
                <label class="control-label" for="inputDate">Date</label>
                <div class="controls">
                    <input type="text" id="inputDate" placeholder="DD.MM.YYYY">
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="inputDescription">Description</label>
                <div class="controls">
                    <input type="text" id="inputDescription" placeholder="Description">
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="inputCategory">Category</label>
                <div class="controls ui-widget">
                    <select id="inputCategory" placeholder="Category">
                        <option value=""></option>
                        <option value="Clothes">Clothes</option>
                        <option value="Rent">Rent</option>
                        <option value="Household">Household</option>
                        <option value="Leisure">Leisure</option>
                        <option value="Cat">Cat</option>
                        <option value="Car">Car</option>
                        <option value="Doctor">Doctor</option>
                        <option value="Medicine">Medicine</option>
                        <option value="Office Material">Office Material</option>
                    </select>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="inputAmount">Amount</label>
                <div class="controls">
                    <div class="btn-group" data-toggle="buttons-radio">
                        <button type="button" class="btn"><i class="icon-minus icon-black"></i></button>
                        <button type="button" class="btn"><i class="icon-plus icon-black"></i></button>
                    </div>
                    <input type="text" id="inputAmount" placeholder="Amount">
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="inputRepeat">Repeat</label>
                <div class="controls">
                    <select id="inputRepeat">
                        <option>daily</option>
                        <option>weekly</option>
                        <option>monthly</option>
                        <option>annually</option>
                    </select>
                </div>
            </div>
        </form>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Discard</button>
        <button id="saveandnew" class="btn btn-primary">Save changes and add new</button>
        <button id="saveonly" class="btn btn-primary" data-dismiss="modal">Save changes</button>
    </div>
</div>

<div class="container">
    <div id="alertikus1"></div>
    <h2>November 2012</h2>
    <h3>Expenses</h3>
    <div align="center"><img src="assets/img/dashboard.png"></div>
    <!-- <div class="progress progress-striped">
        <div class="bar bar-success" style="width: 64.567%;"></div>
    </div>
    -->
    <br>
    <br>
    <br>
    <div class="row">
        <div class="span6">
            <h3>Top earnings</h3>
            <div id="chart1"></div>
        </div>
        <div class="span6">
            <h3>Top expenses</h3>
            <div id="chart2"></div>
        </div>
    </div>
</div>

<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/jqplot/jquery.jqplot.min.js"></script>
<script src="assets/js/jqplot/plugins/jqplot.pieRenderer.min.js"></script>
<script src="assets/js/chosen.jquery.min.js"></script>
<script type="text/javascript">
    $(function() {
        var data1 = [
            ['Salery', 12],
            ['Side job', 9],
            ['Bribe', 14],
            ['Securities', 16],
            ['Begging', 7],
            ['Others', 9]
        ];
        var data2 = [
            ['Clothes', 12],
            ['Rent', 9],
            ['Household', 14],
            ['Doctor', 16],
            ['Leisure', 7],
            ['Others', 9]
        ];
        var plot1 = jQuery.jqplot('chart1', [data1], {
            seriesDefaults: {
                renderer: jQuery.jqplot.PieRenderer,
                rendererOptions: {
                    showDataLabels: true,
                    sliceMargin: 5
                }
            },
            legend: {
                show: true,
                location: 'e'
            }
        });
        var plot2 = jQuery.jqplot('chart2', [data2], {
            seriesDefaults: {
                renderer: jQuery.jqplot.PieRenderer,
                rendererOptions: {
                    showDataLabels: true,
                    sliceMargin: 5
                }
            },
            legend: {
                show: true,
                location: 'e'
            }
        });
    });
</script>
<script type="text/javascript">
    $(function() {
        $('#inputCategory').chosen({
            create_option_text: 'Create category'
        });
    });
</script>
	<script type="text/javascript">
	$('#add button').each(function(index) {
		$(this).click(function() {
			$('#add form')[0].reset();
		});
	});
	</script>
	<script type="text/javascript">
	$('#saveonly').click(function() {
		if (Math.random() > 0.5) {
			$('#alertikus1').html('<div class="alert alert-error"><button type="button" class="close" data-dismiss="alert">&times;</button><strong>Error!</strong> Unable to add expense. Please try again.</div>');
		} else {
			$('#alertikus1').html('<div class="alert alert-success"><button type="button" class="close" data-dismiss="alert">&times;</button><strong>Success!</strong> Expense saved.</div>');
		}
	});
	$('#saveandnew').click(function() {
		if (Math.random() > 0.5) {
			$('#alertikus2').html('<div class="alert alert-error"><button type="button" class="close" data-dismiss="alert">&times;</button><strong>Error!</strong> Unable to add expense. Please try again.</div>');
		} else {
			$('#alertikus2').html('<div class="alert alert-success"><button type="button" class="close" data-dismiss="alert">&times;</button><strong>Success!</strong> Expense saved.</div>');
		}
	});
	$('a[href="#add"]').click(function() {
		$('#alertikus1').html('');
		$('#alertikus2').html('');
	});
	</script>
</body>
</html>